<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-11-17 10:09:31
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-11-30 11:09:33
 * @FilePath: /hgpt-admin/src/pages/home/index.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="homePage">
    <div class="navContent">
      <el-menu
        :default-active="$route.path"
        select="selectMenu"
        class="el_menu_content"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <div class="menuTitle">健康管理后台</div>
        <!-- <el-menu-item index="/test">
          <i class="el-icon-data-analysis"></i>
          <span slot="title">系统首页</span>
        </el-menu-item> -->
        <el-submenu index="/1">
          <template slot="title">
            <i class="el-icon-first-aid-kit"></i>
            <span slot="title">健康服务</span>
          </template>
          <!-- <el-menu-item index="/test">预约时段</el-menu-item> -->
          <el-menu-item index="/reservationSet">预约配置</el-menu-item>
          <el-menu-item index="/reservationSearch">预约查询</el-menu-item>
          <el-menu-item index="/packageSet">套餐设置</el-menu-item>
        </el-submenu>
        <el-submenu index="/2">
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span slot="title">内容管理</span>
          </template>
          <el-menu-item index="/addNews">健康资讯</el-menu-item>
          <el-menu-item index="/addMeasureData">测评量表</el-menu-item>
        </el-submenu>
        <!-- <el-menu-item index="/test">
          <i class="el-icon-data-analysis"></i>
          <span slot="title">商城管理</span>
        </el-menu-item> -->
        <!-- <el-menu-item index="/test">
          <i class="el-icon-data-analysis"></i>
          <span slot="title">数据统计</span>
        </el-menu-item>
        <el-menu-item index="/test">
          <i class="el-icon-data-analysis"></i>
          <span slot="title">系统管理</span>
        </el-menu-item> -->
      </el-menu>
    </div>
    <div class="rightContent">
      <div class="infoContent">
        <div>{{ getPageName(this.$route.fullPath) }}</div>
        <el-dropdown class="userIconContent" @command="clickMenu">
          <span class="el-dropdown-link" style="font-size: 20px">
            <i class="el-icon-user-solid"></i>
            <span style="margin-left: 5px">{{ userName }}</span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userName: JSON.parse(sessionStorage.getItem("userInfo")).userName
    }
  },
  mounted () {
  },
  methods: {
    // 解析当前页面名称
    getPageName (v) {
      switch (v) {
        case "/reservationSet":
          return "预约配置"
        case "/reservationSearch":
          return "预约查询"
        case "/addNews":
          return "添加资讯"
        case "/addMeasureData":
          return "添加测评"
        case "/packageSet":
          return "套餐设置"
        default:
          break
      }
    },
    // 点击下拉菜单
    clickMenu (v) {
      // 退出登陆
      if (v == 'logOut') {
        const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.$api.post('rest/logout?username=' + userInfo.userName, {
        }).then(res => {
          if (res.statusCode == 200) {
            sessionStorage.removeItem("token")
            this.$router.push({ name: "Login" })
            this.$message.success("登出成功")
          } else {
            this.$message.error(res.message || "登出失败")
          }
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.homePage {
  display: flex;
  width: 100%;
  height: 100%;
  .navContent {
    height: 100%;
    width: 200px;
    .el_menu_content {
      height: 100%;
      .menuTitle {
        color: #fff;
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        font-size: 20px;
        margin-left: 22px;
        margin-bottom: -10px;
      }
    }
  }
  .rightContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    .infoContent {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      height: 50px;
      align-items: center;
      .userIconContent {
        cursor: pointer;
      }
    }
  }
}
</style>>

